<script>
init({
  title: 'Reset View',
  desc: 'Reset the bootstrap table view, for example reset the table height: `$table.bootstrapTable(\'resetView\')`.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <div id="toolbar">
    <button
      id="button"
      class="btn btn-secondary"
    >
      Large and resetView
    </button>
    <button
      id="button2"
      class="btn btn-secondary"
    >
      Small and resetView
    </button>
  </div>
  <div class="div-table">
    <table
      id="table"
      data-toggle="table"
      data-toolbar="#toolbar"
      data-height="460"
      data-url="json/data1.json"
    >
      <thead>
        <tr>
          <th data-field="id">
            ID
          </th>
          <th data-field="name">
            Item Name
          </th>
          <th data-field="price">
            Item Price
          </th>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script>
  const $div = $('.div-table')
  const $table = $('#table')
  const $button = $('#button')
  const $button2 = $('#button2')

  function mounted () {
    $button.click(function () {
      $div.width($div.width() + 50)
      $table.bootstrapTable('resetView')
    })
    $button2.click(function () {
      $div.width($div.width() - 50)
      $table.bootstrapTable('resetView')
    })
  }
</script>

<style>
  .div-table {width: 600px;}
</style>
